// 入口文件
import Vue from 'vue'
// 配置vuex的步骤
// 1. 运行cnpm i vuex -S
// 2. 导入包
import Vuex from 'vuex';
// 3. 注册vuex到vue中
Vue.use(Vuex);
// 4. new Vuex.Store()  实例， 得到一个 数据仓储对象
var store = new Vuex.Store({
  state: {
    // 大家可以把 state 想象成组件中的 data， 专门用来存储数据的
    // 如果在 组件中，想要访问store 中的数据，只能通过this.$store.state.***来访问
    count: 0
  },
  mutations: {  // 可以认为是组件中的methods MVC中的C业务逻辑层  这里面的方法专门操作state中数据的
    // 注意： 如果要操作 store 中的state 值，只能通过 调用 mutations 提供的方法，才能操作state中
    // 对应的数据，不推荐每个组件直接操作 state中的数据， 因为 万一导致了数据的混乱，不能快速定位到错误的原因
    // 因为，每个组件都有可能有操作数据的方法  mutations相当于仓库管理员
    increment(state) {
      // 和Vue.filter('name', function(data){})、Vue.directive('name', { bind(el,binding){}, inserted(el){}, updated(el){} })、before-enter(el){},enter(el, done){}, afterenter(el){}类似
      state.count++;
    },
    // 注意： 如果组件想要调用 mutations中的方法，只能使用 this.$store.commit('方法名');
    // 这种调用mutations 方法的格式 和this.$emit('父组件中方法名') 类似
    substract(state, obj) {
      // 注意： mutations 的 函数参数列表中，最多支持两个参数，其中，参数1；是 state 状态；
      // 参数2: 通过 commit提交过来的参数

      console.log(obj);
      state.count -= (obj.c + obj.d);
    }
  },
  getters: {   // 里面所有东西都是funtion 第一个参数永远都是state
    // 类似组件的计算属性computed把方法拆分成对象  对象内有两个方法get和set  这里的getters就类似get方法 只负责向外提供数据
    // 注意：这里的 getters，只负责 对外提供数据，不负责 修改数据，如果想要修改 state 中的数据
    // 请去 找mutations
    optCount: function (state) {
      return '当前最新的count值是：' + state.count;
    }
    // 经过咱们回顾对比，发现 getters 中的方法，和组件中的过滤器比较类似，因为 过滤器和
    // getters 都没有修改原数据， 都是把原数据做了一层包装，提供给了调用者
    // 其次，getters也和 computed 比较像，只要 state 中的数据发生变化了，那么，如果
    // getters 正好也引用了这个数据，那么 就会立即触发 getters 的重新求值
  }
})

// 总结：
// 1.  state 中的数据，不能直接修改，如果想要修改， 必须通过mutations
// 2. 如果组件想要直接 从 state 上获取数据，需要 this.$store.state.***
// 3. 如果 组件，想要修改数据，必须使用mutations 提供的方法，需要通过 this.$store.commit('方法的名称', 唯一的一个参数)
// 4. 如果 store 中 state 上的数据 在对外提供的时候，需要做一层包装，那么，推荐使用
//  getters , 如果需要使用 getters，则用this.$store.getters.***  //用法也类似使用computed中方法属性

import App from './App.vue'

const vm = new Vue({
  el: '#app',
  render: c => c(App),
  store // 5. 将 vuex 创建的 store 挂载到 VM 实例上， 只要挂载到了 vm 实例上，任何组件都能使用 store 来存取数据，全局访问
})